<template>
  <section>
    <div class="container">
      <div class="container-title">自动发货设置</div>
      <div class="container-body pd">
        <el-form label-width="120px" :model="deliverFrom" ref="deliverFrom">
          <el-form-item label="自动发货">
            <el-switch
              v-model="deliverFrom.isTiming"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="最大发货量">
            <el-input v-model.number="deliverFrom.maxNum"></el-input>
          </el-form-item>
          <el-form-item label="操作">
            <el-button @click="getTimeConfig">取消</el-button>
            <el-button type="primary" @click="resetForm(true)">保存</el-button>
          </el-form-item>
        </el-form>
        <div class="tableContainer">
          <div class="tableBox">
            <p class="title">已生效发货时间</p>
            <el-table
              :data="getTbTimingConfigEffect.timeRule"
              border
              style="width: 100%"
              size="small"
            >
              <el-table-column prop="time" label="发货时间" align="center">
              </el-table-column>
            </el-table>
          </div>
          <div class="tableBox">
            <p class="title">未生效发货时间</p>
            <el-table
              :data="getTbTimingConfigNoEffect.timeRule"
              border
              style="width: 100%"
              size="small"
            >
              <el-table-column prop="time" label="发货时间" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <p class="red">为保证自动发货运行正常，已生效发货时间不可修改或编辑</p>
        <p class="red bottom">
          新增的发货时间皆次日00:00后生效,并且替换当前已生效时间
        </p>
        <el-button type="primary" @click="addTimePop = true"
          >增加自动发货时间</el-button
        >
      </div>
    </div>
    <!-- 增加自动发货时间 -->
    <el-dialog
      :title="'增加自动发货时间'"
      :visible.sync="addTimePop"
      width="30%"
      center
    >
      <el-time-select
        v-model="deliverTime"
        :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '23:00',
        }"
        placeholder="增加自动发货"
      >
      </el-time-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTimePop = false" size="small">取 消</el-button>
        <el-button type="primary" @click="resetForm(true)" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      addTimePop: false,
      deliverTime: "",
      systemConfigId: "",
      deliverFrom: {
        isTiming: false,
        maxNum: 0,
      }, //自动发货from,
      getTbTimingConfigEffect: [], // 生效时间
      getTbTimingConfigNoEffect: [], //  未生效时间
    };
  },
  created() {
    this.getTimeConfig();
  },
  methods: {
    async getTimeConfig() {
      // 请求案例
      let res = await this.$store.dispatch("getTimeConfig", {});
      if (res.success) {
        console.log(res.data);
        this.systemConfigId = res.data.systemConfigId;
        this.deliverFrom = {
          isTiming: res.data.isTiming,
          maxNum: res.data.maxNum,
        };
        this.getTbTimingConfigEffect = res.data.getTbTimingConfigEffect || [];
        this.getTbTimingConfigNoEffect = res.data.getTbTimingConfigNoEffect || [];
      }
      this.loading = false;
    },
    async resetForm(time) {
      this.$refs["deliverFrom"].validate(async (valid) => {
        if (valid) {
          // 编辑案例
          let res = await this.$store.dispatch("putTimeConfig", {
            systemConfigId: this.systemConfigId,
            isTiming: this.deliverFrom.isTiming,
            maxNum: this.deliverFrom.maxNum,
            times: time ? [this.deliverTime] : [],
          });
          if (res.success) {
            this.getTimeConfig();
          }
          this.editID = "";
        } else {
          return false;
        }
         this.addTimePop=false;
      });
    },
   
  },
};
</script>

<style lang="scss" scoped>
.tableContainer {
  display: flex;
  margin-top: 20px;
  .tableBox {
    margin-bottom: 10px;
    .title {
      text-align: center;
      margin-bottom: 10px;
    }
    margin-right: 10px;
    width: 400px;
  }
}
.red {
  color: red;
  &.bottom {
    margin-bottom: 20px;
  }
}
</style>
